import { Component, OnInit } from '@angular/core';
import { SUB_TABS_LIST, nameplate_keys, testInfo_keys } from '../constant';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    styleUrls: ['./components.less'],
    selector: 'equip-data-handle',
    template: `
        <div class="dataHandlingContainer">
            <nz-tabset>
                <nz-tab *ngFor="let item of sub_list" [nzTitle]='item.tabsName'>
                    <ng-container [ngSwitch]="item.key">
                        <div class="nameplate-input"  *ngSwitchCase='1'>
                            <form nzLayout="inline" [formGroup]='nameplate_form'>
                                <nz-form-item *ngFor="let _key of nameplate_keyNames">
                                    <nz-form-label>{{nameplate_keys_value[_key]}}</nz-form-label>
                                    <nz-form-control><input  nz-input [formControlName]='_key' /></nz-form-control>
                                </nz-form-item>
                                <button nz-button nzType="primary" (click)='submit_nameplate_form()'>提交</button>
                            </form>
                        </div>
                        <div class="testInfo-input" *ngSwitchCase='2'>
                            <form nzLayout="inline" [formGroup]='testInfo_form'>
                            <nz-form-item *ngFor="let _key of testInfo_keyNames">
                                    <nz-form-label>{{testInfo_keys_value[_key]}}</nz-form-label>
                                    <nz-form-control><input  nz-input [formControlName]='_key' /></nz-form-control>
                                </nz-form-item>
                                <button nz-button nzType="primary" (click)='submit_testInfo_form()'>提交</button>
                            </form>
                        </div>
                        <div class="maintenance-record-input" *ngSwitchCase='5'>
                            <form [formGroup]='maintenance_form'>
                                <nz-form-item>
                                    <nz-form-label>维护时间</nz-form-label>
                                    <nz-form-control>
                                        <nz-date-picker nzShowTime nzFormat="yyyy-MM-dd HH:mm:ss" formControlName="maintenance_time"></nz-date-picker>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label>维护简述</nz-form-label>
                                    <nz-form-control>
                                        <textarea nz-input formControlName="maintenance_subscription"></textarea>
                                    </nz-form-control>
                                </nz-form-item>
                                <nz-form-item>
                                    <nz-form-label>维护人</nz-form-label>
                                    <nz-form-control>
                                        <nz-select  nzPlaceHolder="Select a person" formControlName="maintenance_person">
                                            <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
                                            <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
                                            <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
                                        </nz-select>
                                    </nz-form-control>
                                </nz-form-item>
                            </form>
                        </div>
                        <div class="defect-record-input" *ngSwitchCase='6'>
                        defect
                        </div>
                    </ng-container>
                </nz-tab>
            </nz-tabset>
        </div>
    `
})

export class DataHandlingComponent implements OnInit {
    sub_list = SUB_TABS_LIST

    //铭牌录入
    nameplate_keys_value = nameplate_keys
    nameplate_keyNames = Object.keys(nameplate_keys)
    nameplate_form!: FormGroup;
    submit_nameplate_form(): void {
        if (this.nameplate_form.valid)
            console.log(this.nameplate_form.value)
    }

    //出厂信息录入
    testInfo_keys_value = testInfo_keys
    testInfo_keyNames = Object.keys(testInfo_keys)
    testInfo_form!: FormGroup
    submit_testInfo_form(): void {
        if (this.testInfo_form.valid)
            console.log(this.testInfo_form.value)
    }

    //维护记录录入
    maintenance_form !: FormGroup


    ngOnInit(): void {

        //铭牌录入表单
        const nameplate_obj = {}, testInfo_obj = {}
        for (let i of this.nameplate_keyNames) {
            nameplate_obj[i] = [""]
        }
        for (let j of this.testInfo_keyNames) {
            testInfo_obj[j] = [""]
        }
        this.nameplate_form = this.fb.group(nameplate_obj)
        this.testInfo_form = this.fb.group(testInfo_obj)
        this.maintenance_form = this.fb.group({
            maintenance_time:[null],
            maintenance_person:['jack'],
            maintenance_subscription:['']
        })
    }

    constructor(private fb: FormBuilder) { }
}